<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
		<title>用户登录</title>
		<style type="text/css">
			div{}
			body{
				font-size: 13px;
				font-family: "黑体";
			}
			input{
				border: 0;
				
			}
			*{
				cursor: pointer;
			}
			*{
				outline: none;
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			
			<!--logo-->
			<div style="width: 100%;margin:40px 0 20px 0;">
				<div style="text-align:center;width: 100%;">
					<img src="88共享_官网/88共享/images/logo.png"/>
				</div>
			</div>
			
			<div class="form">
				<div class="mobileName" style="background: #f6f6f6;">
					<div class="key" style="float: left;width:20%;text-align: center;padding:10px 0 10px 0;">
						手机号
					</div>
					<div style="float: left;">
						<input type="number" id="phone_number" style="background: #f6f6f6;margin-top: 10px;" />
					</div>
					<div style="clear: both;">
						
					</div>
				</div>
				<div style="float: left;background: #f6f6f6;width:62%;border: 1px solid #f5f5f5;margin-top: 10px;padding:10px 0 10px 0;">
					<div style="width:30%;float: left;text-align: center;">
						验证码
					</div>
					<div style="float: left;width:68%;overflow: hidden;text-align: center;">
						<input type="number" id="code" style="background: #f6f6f6;" value="" />
					</div>
					<div style="clear: both;">
						
					</div>
				</div>
				
				<button class="atitle" style="border:0;float: right;width:36%;background: #f6f6f6;margin-top:10px;padding:10px 0 12px 0;text-align: center;">
						获取验证码
				</button>
				<div style="clear: both;">
						
				</div>
				
				<div class="" style="margin-top: 20px;">
					<button style="color:#ffffff;border:0;width: 100%;padding:10px 0 10px 0;background: #5fafff;">登&nbsp;录</button>
				</div>
			</div>
		</div>
		
		<div style="width: 100%;text-align:center;padding: 10px 0 10px 0; font-size: 12px; position: fixed;bottom: 10px;">
			&copy; 上汽工会版权所有
		</div>
		
	</body>
	
	<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).on("click",".atitle",function(){
			var mobile=$("#phone_number").val();
			
			if(mobile == null || mobile == "" || mobile.length!=11){
				
				alert("请输入格式正确的手机号");
				
				return;
			}
			
			getVerificationCode(mobile);//调用发送验证码方法
			
			var count=60;
			$(".atitle").css("color","#cccccc");
			$(".atitle").attr("disabled","disabled");
			$(".atitle").text("验证码已经发送");
			var jishiqi = setInterval(function(){
				count=count-1;
				$(".atitle").text("剩余"+count+"秒失效");
				if(count==0){
					$(".atitle").removeAttr("disabled");
					$(".atitle").text("重新发送验证码");
					count = 60;
					clearInterval(jishiqi);
				}
				
			},1000);
		});
		
		//发送后台获取验证码 
		function getVerificationCode(mobile){
			$.ajax({
				url:"/Wchat/functionalBusinessController/getVerificationCode.do?mobile="+mobile,
				success:function(json){
					json=$.parseJSON(json.exception);
					//alert(json.exception);
				}
			});
		}
		
		//提交用户信息到服务器
		function addUser(){
			var phone_number=$("#phone_number").val();
			var code=$("#code").val();
			
			if(code=="" || code==null){
				alert("验证码不可为空!");
				return;
			}
			
			$.ajax({
				url:"/Wchat/functionalBusinessController/login.do",
				data:{phone_number:phone_number,code:code},
				success:function(json){
					
					//alert("验证码:"+code+",手机号:"+phone_number+",用户名:"+username+",openid:"+openid);
					
					if(json.success==true){
						alert(json.token);
						localStorage.token = json.token;
						window.location.href="msg.html";
					}else{
						alert(json.msg);
					}
				}
			});
		}
	</script>
</html>
